<template>
    <view class="content">
        <view class="box">
            <view class="item">
                <view>标题</view>
                <view class="item-r">
                    <input type="text" v-model="title" placeholder="输入标题" placeholder-class="p-inp" class="inp">
                </view>
            </view>
            <view class="item">
                <view>楼盘名称</view>
                <view class="item-r" @click="show = true">
                    <input type="text" v-model="store" placeholder="请选择楼盘" placeholder-class="p-inp" class="inp" disabled>
                    <image src="../../../static/icon/arrow_d_01.png" class="arrow-d-01"></image>
                </view>
            </view>
            <view class="item u-p-t-15 u-p-b-15">
                <view>选择时间</view>
                <view class="item-r">
                    <view class="inp-time" @click="KStimeShow = true">
                        <input type="text" v-model="startTime" placeholder="开始时间" placeholder-class="p-inp" class="t-inp" disabled>
                        <image src="../../static/icon/time.png" class="time-icon"></image>
                    </view>
                    <view class="u-p-l-10 u-p-r-10">至</view>
                    <view class="inp-time" @click="JStimeShow = true">
                        <input type="text" v-model="endTime" placeholder="结束时间" placeholder-class="p-inp" class="t-inp" disabled>
                        <image src="../../static/icon/time.png" class="time-icon"></image>
                    </view>
                </view>
            </view>
            <view class="ques">
                <view class="title">试题</view>
                <view class="ques-i" v-for="(item, index) in data" :key="index">
                    <view class="u-flex u-row-between u-col-top">
                        <view class="u-flex-1">{{index + 1}}、{{item.question}}</view>
                        <image src="../../../static/icon/del.png" class="del-icon" @click="del(index)"></image>
                    </view>
                    <!-- <view v-for="(el, ind) in 4" :key="ind">A、2023-05-01</view> -->
                </view>
                <view class="u-flex u-row-right">
                    <image src="../../../static/image/add.png" class="add-icon" 
                        @click="$gTo('/staff/pages/create/create-question?from=1')"></image>
                </view>
            </view>
        </view>
        <view class="btn" @click="$noMultipleClicks(doSubmit)">确认创建</view>
        
        <u-popup mode="bottom" v-model="show">
            <view class="popup">
                <u-search placeholder="请输入门店名称" v-model="keyword" :show-action="false" @search="doSearch"></u-search>
                <scroll-view scroll-y="true" style="height: 500rpx;" @scrolltolower="getList()">
                    <view>
                        <view class="popup-item" v-for="(item, index) in list" :key="index"
                            :class="{active : item.isSelect}" @click="choose(item)">
                            {{item.name}}
                        </view>
                    </view>
                </scroll-view>
                <!-- <view class="pop-btn" @click="confirmStore">确定</view> -->
            </view>
        </u-popup>
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick:true,//连点
                show: false,
                data: [],
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
                keyword: '',
                info: {},
                title: '',
                store: '',
                storeId: '',
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
            };
        },
        onLoad(option) {
            if (option.list) {
                this.data = JSON.parse(option.list)
            }
            
            uni.$on('CHOOSE_QUESTION', data => {
                // console.log('data',data)
                if (this.data.length == 0) {
                    this.data = data
                } else {
                    var arr = data
                    this.data.forEach((cur, index) => {
                        arr.forEach((el, eli) => {
                            if (cur.id == el.id) {
                                arr.splice(eli, 1)
                            }
                        })
                    })
                    this.data = [...this.data, ...arr]
                }
                // console.log('this.data',this.data)
            })
            this.getInfo()
        },
        methods: {
            doSubmit() {
                if (!this.title) {
                    this.$toast('请输入标题');
                    return
                }
                if (!this.storeId) {
                    this.$toast('请选择楼盘');
                    return
                }
                if (!this.startTime) {
                    this.$toast('请选择开始时间');
                    return
                }
                if (!this.endTime) {
                    this.$toast('请选择结束时间');
                    return
                }
                var ids = []
                this.data.forEach(cur => {
                    ids.push(cur.id)
                })
                
                this.$ajax('insert_question_activity', {
                    user_token: this.$getSync('userToken'),
                    title: this.title,//标题
                    pro_id: this.storeId,//楼盘id
                    start_time: this.startTime,//开始时间
                    end_time: this.endTime,//结束时间
                    question_ids: ids.join(','),//考题id，分割字符串
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                        	this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            del(index) {
                this.data.splice(index, 1);
            },
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.startTime = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.endTime = e.year + '-' + e.month + '-' + e.day;
            	}
            },
            // 选择楼盘
            choose(item) {
                const nowStatu = item.isSelect;
                this.list.forEach(ii => {
                    ii.isSelect = false;
                })
                item.isSelect =! nowStatu
                this.storeId = item.id
                this.store = item.name
                this.show = false
            },
            
            // 搜索
            doSearch() {
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            // user_type 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划
            // 只有运维经理和项目驻场 会创建活动
            // 获取楼盘列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('properties_list', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    type: this.info.user_type == 3 ? 3 : 0,//0全部 1新品加推 2其他楼盘 3项目驻场 4项目总监 5运维经理
                    name: this.keyword,//搜索
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail.properties.length > 0) {
            				this.list = this.list.concat(ret.detail.properties);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
                        this.list.forEach(cur => {
                            this.$set(cur, 'isSelect', false)
                        })
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            // 获取个人信息
            getInfo() {
                this.$ajax('person_detail', {
                    user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.info = ret.detail
                        this.getList()
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .popup{
        padding: 24rpx;
    }
    .popup-item{
        padding: 20rpx 0;
        text-align: center;
    }
    .active{
        font-weight: bold;
        color: #00a1e9;
    }
    .pop-btn{
        color: #fff;
        background-color: #00a1e9;
        padding: 20rpx;
        text-align: center;
        margin: 20rpx;
        border-radius: 50rpx;
    }
    
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .box{
        padding: 0 20rpx 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // padding: 25rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inp{
        text-align: right;
        width: 480rpx;
        height: 100rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .p-inp{
        color: #acacac;
    }
    .arrow-d-01{
        width: 16rpx;
        height: 11rpx;
        margin-left: 10rpx;
    }
    .inp-time{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15rpx;
        background-color: #fafafa;
    }
    .t-inp{
        width: 180rpx;
        height: 80rpx;
    }
    .time-icon{
        width: 32rpx;
        height: 34rpx;
    }
    .ques{
        padding-top: 30rpx;
    }
    .title{
        padding-bottom: 20rpx;
    }
    .ques-i{
        background-color: #fafafa;
        padding: 25rpx;
        margin-bottom: 20rpx;
        font-size: 24rpx;
        line-height: 1.8;
    }
    .del-icon{
        width: 25rpx;
        height: 26rpx;
        margin-left: 10rpx;
    }
    .add-icon{
        width: 152rpx;
        height: 56rpx;
    }
    
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
</style>
